<template>
  <Tab />
  <div class="container">
    <div class="content">
      <!-- 各航班机票价格 -->
      <div class="flight-price">
        <div class="title">
          <span>本次机票已为您节省</span>
          <span>100</span>
          <span>元</span>
        </div>
        <div class="horizon"></div>
        <div class="tiket-list">
          <div class="tiket-item" v-for="(item, index) in payList" :key="index">
            <img :src="item.img" alt="" />
            <span>{{ item.name }}</span>
            <div class="horz"></div>
            <div>
              <span>¥{{ item.price }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 选中机票 -->
      <div class="choice-titket">
        <van-swipe
          class="my-swipe"
          indicator-color="#005FF9"
          show-indicators
          :loop="false"
        >
          <van-swipe-item v-for="(item, index) in 3"
            ><TicketCard @addUser="addUser"
          /></van-swipe-item>
        </van-swipe>
        <div>
          <img src="../../static/img/bingo.png" alt="" />
          <span>当前选中机票</span>
        </div>
      </div>
    </div>
  </div>
  <div class="btn" @click="popupPay">
    <span>立即购买</span>
  </div>

  <!-- 弹框显示支付页面 -->
  <van-popup v-model:show="showPayment" position="bottom" round>
    <div class="popup-payment">
      <div class="payment">
        <div class="payment-container">
          <div class="pay-method">
            <span class="title">支付方式:</span>
            <div class="pay-method-cont">
              <div
                class="pay-item"
                :class="{ active: payType == index }"
                v-for="(item, index) in payments"
                :key="index"
                @click="checkPay(index)"
              >
                <img
                  class="check"
                  v-if="payType == index"
                  :src="item.checkimg"
                  alt=""
                />
                <img :src="item.icon" alt="" />
              </div>
            </div>
          </div>
          <div class="total-num">
            <span class="num">数量:</span>
            <div class="number">
              <span class="dot">x</span><span class="ns">2</span>
            </div>
          </div>
          <div class="total-price">
            <span class="price-title">支付总金额:</span>
            <div class="price-num">
              <span>¥</span>
              <span>1604</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-pay" @click="goToPay">
        <span>立即支付</span>
      </div>
    </div>
  </van-popup>

  <!-- 弹出层-添加乘客 -->
  <van-popup v-model:show="showCenter" round style="overflow-x: hidden">
    <div class="person-container">
      <div class="header-img">
        <div class="header-title">
          <span>添加乘车人员</span>
          <div class="time-title">
            <span>2024年1月25日</span>
            <span>南航 CZ3210 22:00 ～ 00:50</span>
          </div>
        </div>
      </div>
      <div class="horizon"></div>
      <div class="form-container">
        <van-cell-group inset>
          <van-field
            v-model="form.name"
            label="姓名"
            placeholder="请输入姓名"
            label-align="top"
          />
          <van-field
            v-model="form.ID"
            label="身份证"
            placeholder="请输入身份证"
            label-align="top"
            type="number"
          />
          <van-field
            v-model="form.phone"
            label="电话"
            placeholder="请输入电话"
            label-align="top"
            type="tel"
            maxlength="11"
          />
        </van-cell-group>
      </div>

      <div class="btn-submit-bottom">
        <div class="btn-cancel" @click="showCenter = false">
          <span>取消</span>
        </div>
        <div class="btn-submit"><span>提交</span></div>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { ref, reactive } from "vue";
import qunaer from "@/static/img/qunaer.png";
import dh from "@/static/img/dh.png";
import nh from "@/static/img/nh.png";
import xc from "@/static/img/xc.png";
import fz from "@/static/img/fz.png";
import hc from "@/static/img/12312.png";

import wx from "@/static/img/wx.png";
import zfb from "@/static/img/zfb.png";
import yinl from "@/static/img/yinl.png";
import check from "@/static/img/check.png";
import { uni } from "@dcloudio/uni-h5";

import TicketCard from "../components/TicketCard.vue";
import { getTiketInfos } from "@/api/order.js";

let showCenter = ref(false);

let form = reactive({
  name: "张华",
  ID: "35222919944517230",
  phone: "18659212332",
});

let payments = reactive([
  {
    name: "微信",
    icon: wx,
    checkimg: check,
  },
  {
    name: "支付宝",
    icon: zfb,
    checkimg: check,
  },
  {
    name: "银联",
    icon: yinl,
    checkimg: check,
  },
]);
let payList = ref([
  {
    img: qunaer,
    name: "去哪儿",
    price: "902",
  },
  {
    img: dh,
    name: "东航",
    price: "3323",
  },
  {
    img: nh,
    name: "南航",
    price: "1232",
  },
  {
    img: xc,
    name: "携程",
    price: "902",
  },
  {
    img: fz,
    name: "飞猪",
    price: "132",
  },
  {
    img: hc,
    name: "12312",
    price: "431",
  },
]);
let showPayment = ref(false);
let payType = ref(0);

function addUser() {
  showCenter.value = true;
}

function popupPay() {
  showPayment.value = true;
}

function checkPay(index) {
  payType.value = index;
}

//获取机票信息
async function getTikets(){
  // let {data}=await getTiketInfos()
  // console.log(`output->data`,data)

}

function goToPay() {
  uni.navigateTo({
    url: "/pages/success/index",
  });
}
getTikets();
</script>
<style scoped lang="scss">
.container {
  background-size: cover; /* 背景图覆盖整个元素 */
  background-position: center; /* 背景图居中 */
  height: 1624rpx; /* 高度设置为100%，根据实际情况调整 */
  width: 750rpx; /* 宽度设置为100%，根据实际情况调整 */
  position: fixed; /* 定位为固定，使得背景图覆盖整个页面 */
  top: 0;
  left: 0;
}

.active-dot {
  opacity: 1;
}

.content {
  width: 664rpx;
  height: 920rpx;
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  //   border: 1px solid red;

  .flight-price {
    width: 690rpx;
    height: 320rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(171, 181, 191, 0.2);
    border-radius: 28rpx;

    .title {
      padding: 10px;
      display: flex;
      align-items: flex-end;
      & > :nth-child(1) {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        line-height: 28rpx;
        text-align: center;
        font-style: normal;
      }
      & > :nth-child(2) {
        font-family: Gotham, Gotham;
        font-weight: bold;
        font-size: 60rpx;
        color: #f23232;
        line-height: 50rpx;
        text-align: left;
        font-style: normal;
        margin-left: 5px;
      }

      & > :nth-child(3) {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #f23232;
        line-height: 28rpx;
        text-align: center;
        font-style: normal;
        margin-left: 2px;
      }
    }

    .horizon {
      width: 690rpx;
      border: 1.6rpx solid #dfdfdf;
    }
    .tiket-list {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;
      align-content: space-between;
      height: 160.8rpx;
      margin-top: 5px;
      .tiket-item {
        display: flex;
        align-items: center;
        width: 298rpx;
        // margin-left: 20px;
        & > :nth-child(1) {
          width: 36rpx;
          height: 36rpx;
        }
        & > :nth-child(2) {
          width: 84rpx;
          height: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #6f6f6f;
          line-height: 28rpx;
          text-align: left;
          font-style: normal;
          margin-left: 3px;
        }
        .horz {
          width: 68rpx;
          border: 1.6rpx solid #dadada;
          margin: 0 4px;
        }
        & > :nth-child(4) {
          width: 68rpx;
          display: flex;
          justify-content: flex-start;
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #545454;
            line-height: 28rpx;
            text-align: right;
            font-style: normal;
          }
        }
      }
    }
  }

  .choice-titket {
    width: 690rpx;
    height: 454rpx;

    & > :nth-child(2) {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      img {
        width: 36rpx;
        height: 36rpx;
      }
      span {
        width: 168rpx;
        height: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #6f6f6f;
        line-height: 28rpx;
        text-align: center;
        font-style: normal;
        margin-left: 5px;
      }
    }
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 440rpx;
  height: 100rpx;
  background: #005ff9;
  border-radius: 54rpx;
  position: fixed;
  bottom: 122rpx;
  left: 50%;
  transform: translate(-50%, 0);

  span {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
  }

  &:active {
    background: #005ff9;
    border-radius: 54rpx;
    border: 2rpx solid #e4e9ef;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(171, 181, 191, 0.2);
    span {
      color: #ffffff;
    }
  }
}

.popup-payment {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .payment {
    position: relative;
    display: flex;
    .payment-container {
      width: 604rpx;
      height: 262rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      .pay-method {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .pay-method-cont {
          display: flex;
          width: 372rpx;
          height: 102rpx;
          justify-content: space-around;
          .pay-item {
            width: 51px; /* 设置宽度 */
            height: 51px; /* 设置高度，保持与宽度一致 */
            border-radius: 50%; /* 将边框半径设为50%，这样四个角都会是半径相等的圆弧，形成完整的圆形 */
            background: #ffffff;
            box-shadow: 0px 2px 5px 0px rgba(205, 207, 210, 0.27);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            img {
              width: 70rpx;
              height: 70rpx;
              cursor: pointer;
            }
            .check {
              width: 15px;
              height: 15px;
              position: absolute;
              top: 4px;
              left: 41px;
              z-index: 100;
            }
          }
        }

        .title {
          width: 138rpx;
          height: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #6c6c6c;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .total-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // margin-top: 20px;

        .price-title {
          width: 100px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #6c6c6c;
          line-height: 16px;
          text-align: left;
          font-style: normal;
        }
        .price-num {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          color: #f23232;
          line-height: 26px;
          text-align: left;
          font-style: normal;
          font-size: 18px;
          span {
            font-size: 18px;
          }
          span ~ span {
            margin-left: 6px;
            font-size: 30px;
          }
        }
      }

      .total-num {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // margin-top: 20px;

        .num {
          width: 100px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #6c6c6c;
          line-height: 16px;
          text-align: left;
          font-style: normal;
        }
        .number {
          .dot {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #000000;
            text-align: left;
            font-style: normal;
          }
          .ns {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #000000;
            text-align: left;
            font-style: normal;
            margin-left: 10px;
          }
        }
      }

      .submit-btn {
        width: 169px;
        height: 53px;
        background: #005ff9;
        border-radius: 26px;
        margin-top: 39px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        & > :nth-child(1) {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #ffffff;
          // line-height: 18px;
          text-align: center;
          font-style: normal;
        }
        &:active {
          background: #005ff9;
          transform: translateY(-2px);
          box-shadow: 0px 4px 10px 0px rgba(171, 181, 191, 0.2);
          span {
            color: #ffffff;
          }
        }
      }
    }
  }
  .btn-pay {
    width: 622rpx;
    height: 100rpx;
    background: #005ff9;
    border-radius: 54rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;

    &:active {
      background: #768aa6;
      span {
        color: #ffffff;
      }
    }

    span {
      width: 144rpx;
      height: 36rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #ffffff;
      line-height: 36rpx;
      text-align: center;
      font-style: normal;
    }
  }
}
.active {
  border: 1px solid #005ff9;
}

.person-container {
  width: 672rpx;
  height: 974rpx;
  background: #ffffff;

  .header-img {
    width: 672rpx;
    height: 234rpx;
    position: fixed; /* 定位为固定，使得背景图覆盖整个页面 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover; /* 背景图覆盖整个元素 */
    background-position: center; /* 背景图居中 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-image: url("../../static/img/tickbg.png");

    .header-title {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 50px;
      left: 20px;

      & > :nth-child(1) {
        width: 240rpx;
        height: 36rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #000000;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
      .time-title {
        display: flex;
        flex-direction: column;
        margin-top: 17px;
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #5b7787;
          line-height: 38rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }

  .horizon {
    width: 668rpx;
    border: 2rpx dashed #4c4c4c;
    position: absolute;
    top: 28%;
    &::before {
      content: ""; /* 必须有内容属性，即使它为空字符串 */
      display: block; /* 或 inline-block，确保元素可以接受宽高和形状设置 */
      width: 25px; /* 圆的直径 */
      height: 25px;
      border-radius: 50%; /* 创建圆形 */
      background-color: #4c4c4c; /* 设置背景颜色 */
      /* 下面是可选的定位属性，例如居中显示（假设相对于父元素定位） */
      left: -19px;
      top: -13px;
      position: absolute;
    }

    &::after {
      content: ""; /* 必须有内容属性，即使它为空字符串 */
      display: block; /* 或 inline-block，确保元素可以接受宽高和形状设置 */
      width: 25px; /* 圆的直径 */
      height: 25px;
      border-radius: 50%; /* 创建圆形 */
      background-color: #4c4c4c; /* 设置背景颜色 */
      /* 下面是可选的定位属性，例如居中显示（假设相对于父元素定位） */
      right: -17px;
      top: -13px;
      position: absolute;
    }
  }
  .form-container {
    width: 100%;
    height: 484.29rpx;
    // border: 1px solid;
    position: absolute;
    left: 50%;
    top: 8%;
    transform: translate(-50%, 50%);
  }

  .btn-submit-bottom {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    .btn-cancel {
      width: 276rpx;
      height: 90rpx;
      background: #ffffff;
      border-radius: 66rpx;
      border: 2rpx solid #c4c4c4;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        width: 72rpx;
        height: 36rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #000000;
        line-height: 36rpx;
        text-align: center;
        font-style: normal;
      }
      &:active {
      }
    }

    .btn-submit {
      width: 276rpx;
      height: 90rpx;
      background: #005ff9;
      border-radius: 66rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10px;
      span {
        width: 72rpx;
        height: 36rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #ffffff;
        line-height: 36rpx;
        text-align: center;
        font-style: normal;
      }
      &:active {
      }
    }
  }
}

::v-deep .van-field__control {
  font-size: 32rpx;
}
</style>
